<template>
  <div> 
      <!-- <h2>2 2 3 4 5 6 7 8 9 0 3 4 5 6 7 8 9 0 3 2 4 54 3 2 1 - - - - - - -- - - </h2> -->

      <van-tabs>
        <van-tab v-for="item in topList" :key="item.id" :title="item.navbarName">
          
        </van-tab>
      </van-tabs>


      <van-swipe :autoplay="3000" indicator-color="pink" class="swiperPic">
        <van-swipe-item v-for="item in swiperList" :key="item.id" @click="goDetails(item.id)">
          <img :src="item.imgUrl">
        </van-swipe-item>
      </van-swipe>


        <van-grid :gutter="10" :border="false" class="menu">
          <van-grid-item
            v-for="item in menuList"
            :key="item.id"
            :icon="item.imgUrl"
            :text="item.menuName"
            @click="goDetails(item.id)"
          />
        </van-grid>


  </div>
</template>

<script>

import Vue from 'vue';

import { Tab, Tabs,Swipe, SwipeItem,Grid, GridItem,Icon } from 'vant';

Vue.use(Tab).use(Tabs).use(Swipe).use(SwipeItem).use(Grid).use(GridItem).use(Icon)

export default {
  data(){
    return{
      topList:[],
      swiperList:[],
      menuList:[]
    }
  },
  methods:{

    getTopList(){
      let _this = this
      _this.$axios.get('https://100boot.cn/wxShop/home/navBar?key=fc821a2187254f91b0596176847bc858').then(res=>{
        // console.log(res)
        _this.topList = res.data.result
      })
    },
    getSwiperList(){
      let _this = this
      _this.$axios.get('https://100boot.cn/wxShop/home/banners?key=fc821a2187254f91b0596176847bc858').then(res=>{
        // console.log(res.data.result)
        _this.swiperList = res.data.result
      })
    },
    getMenuList(){
      let _this = this
      _this.$axios.get('https://100boot.cn/wxShop/home/menus?key=fc821a2187254f91b0596176847bc858').then(res=>{
        // console.log(res.data)
        _this.menuList = res.data.result
      })
    },
    goDetails(id){
      let _this = this
      _this.$router.push('/home/goods/goods_details/?id='+id)
    }

  },
  created(){
    this.getTopList()
    this.getSwiperList()
    this.getMenuList()
    
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>

    .swiperPic{
      width: 100%;
      background-color: pink;
      height: 220px;
      img{
        width: 100%;
        height: 100%;
        vertical-align: bottom;
      }
    }
    .menu{
      margin-top: 10px;
    }

  
</style>